<template>
  <div class="index-wrap" style="width: 1270px; height:100%; margin-left:325px">
    <el-container>
      <el-aside class="left-menu" width="360px">
        <div class="index-left-block">
          <div class="asidebox-hd">
            <a class="title">特色酒店</a>
            <a class="hd-right" href>更多</a>
          </div>
          <div class="container-list pic_news">
            <!-- <template v-for="inf in informationData" v-if="inf.img">
              <img :src="inf.img" :alt="inf.title" />
              <h3>
                <a href="javascript:void(0);">{{ inf.title }}</a>
              </h3>
              <p>{{ inf.msg }}</p>
            </template>-->
            <ul>
              <li v-for="inf in nepalHotelDt" :key="inf.id">
                <span>
                  <el-rate disabled v-model="inf.rank"></el-rate>
                </span>
                <a href="javascript:void(0);" @click="detail(inf.id)">【{{ inf.name }}】</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="mfw-toolbar" id="_j_mfwtoolbar" style="display: block;">
          <div class="toolbar-item-top" style="display: block;">
            <a href="#top" role="button" class="btn _j_gotop">
              <i class="icon_top"></i>
              <em>返回顶部</em>
            </a>
          </div>
          <div class="toolbar-item-feedback">
            <a role="button" data-japp="feedback" class="btn">
              <i class="icon_feedback"></i>
              <em>意见反馈</em>
            </a>
          </div>
          <div class="toolbar-item-code">
            <a role="button" class="btn">
              <i class="icon_code"></i>
            </a>
            <a role="button" class="mfw-code _j_code">
              <img
                src="https://p1-q.mafengwo.net/s1/M00/6C/51/wKgIC1t_6TuASybrAADGUPUHjr021.jpeg?imageMogr2%2Fthumbnail%2F%21450x192r%2Fgravity%2FCenter%2Fcrop%2F%21450x192%2Fquality%2F90"
                width="450"
                height="192"
              />
            </a>
          </div>
        </div>
      </el-aside>
      <el-main style="padding: 15px 0;">
        <el-card>
          <div class="detail">
            <div class="title">
              <span>{{Hotel.name}}</span>
              <div class="extra">
                <!-- 天气 S-->
                <div class="weather" data-cs-p="天气">
                  <a href="/weather/10608.html" target="_blank">
                    <img
                      src="http://images.mafengwo.net/images/mdd_weather/icon/icon19.png"
                      width="25"
                      height="25"
                    />
                    <span>{{Weather.weather}} {{Weather.temperature || 23}}℃</span>
                  </a>
                </div>
                <!-- 天气 E-->
                <div class="weather">{{Weather.reportTime || new Date()}}</div>
              </div>
            </div>
            <div style="height: 60px;">
              <div class="r-nav" id="poi-navbar" data-cs-p="快捷导航">
                <ul class="clearfix">
                  <li data-scroll="overview" class="on">
                    <a title="概况">概况</a>
                  </li>
                  <li data-scroll="attractions" style="display: none">
                    <a title="景点亮点">景点亮点</a>
                  </li>
                  <li data-scroll="commentlist" class>
                    <a href="#commit" title="蜂蜂点评">
                      点评
                      <span>（449条）</span>
                    </a>
                  </li>
                  <li class="nav-right">
                    <a
                      class="btn-reviews"
                      title="我要点评"
                      data-japp="weng_dialog"
                      data-jappconf="common"
                      data-poiid="6329538"
                      data-source="publish.weng.pc_poi_detail.comment"
                    >我要点评</a>
                  </li>
                </ul>
              </div>
            </div>
            <img style="width:96%;height:350px;margin:20px;" :src="Hotel.src" alt="暂无图片" />
            <p v-html="Hotel.content"></p>
            <ul class="baseinfo clearfix">
              <li class="tel">
                <div class="label">电话</div>
                <div class="content">{{Hotel.tel}}</div>
              </li>
              <li class="item-site">
                <div class="label">参考价格</div>
                <div class="content">
                  <span style="font-size:20px;color:#ff8a00">￥{{Hotel.price}}</span>
                </div>
              </li>
              <li class="item-time">
                <div class="label">星级</div>
                <div class="content">
                  <el-rate disabled v-model="Hotel.rank"></el-rate>
                </div>
              </li>
            </ul>
            <dl>
              <dt>交通方式</dt>
              <dd>{{Hotel.traffic}}</dd>
              <dt>景区地址</dt>
              <dd>{{Hotel.position}}</dd>
            </dl>
            <div id="container"></div>
            <div id="commit">
              <div class="mhd mhd-large">
                蜂蜂点评
                <span>
                  （共有
                  <em>2816</em>条真实评价）
                </span>
              </div>
              <div class="review-nav">
                <ul class="clearfix">
                  <li data-type="0" data-category="0" class="on">
                    <span class="divide"></span>
                    <a href="javascript:void(0);">
                      <span>全部</span>
                    </a>
                  </li>
                  <li data-type="0" data-category="2" class>
                    <span class="divide"></span>
                    <a href="javascript:void(0);">
                      <span>有图</span>
                      <span class="num">(1027条)</span>
                    </a>
                  </li>
                  <li data-type="1" data-category="13" class>
                    <span class="divide"></span>
                    <a href="javascript:void(0);">
                      <span>好评</span>
                      <span class="num">（2733条）</span>
                    </a>
                  </li>
                  <li data-type="1" data-category="12" class>
                    <span class="divide"></span>
                    <a href="javascript:void(0);">
                      <span>中评</span>
                      <span class="num">（65条）</span>
                    </a>
                  </li>
                  <li data-type="1" data-category="11" class>
                    <span class="divide"></span>
                    <a href="javascript:void(0);">
                      <span>差评</span>
                      <span class="num">（18条）</span>
                    </a>
                  </li>
                  <li data-type="2" data-category="177932071" class>
                    <span class="filter-word divide"></span>
                    <a href="javascript:void(0);">
                      值得去
                      <span class="num">（158人提及）</span>
                    </a>
                  </li>
                  <li data-type="2" data-category="104553283" class>
                    <span class="filter-word divide"></span>
                    <a href="javascript:void(0);">
                      人很多
                      <span class="num">（140人提及）</span>
                    </a>
                  </li>
                  <li data-type="2" data-category="176777613" class>
                    <span class="filter-word divide"></span>
                    <a href="javascript:void(0);">
                      玩两天
                      <span class="num">（98人提及）</span>
                    </a>
                  </li>
                  <li data-type="2" data-category="115792930" class>
                    <span class="filter-word divide"></span>
                    <a href="javascript:void(0);">
                      西游记拍摄地
                      <span class="num">（44人提及）</span>
                    </a>
                  </li>
                  <li data-type="2" data-category="150389582" class>
                    <span class="filter-word divide"></span>
                    <a href="javascript:void(0);">
                      景色很美
                      <span class="num">（41人提及）</span>
                    </a>
                  </li>
                  <li data-type="0" data-category="1" class>
                    <span class="divide"></span>
                    <a href="javascript:void(0);">
                      <span>金牌点评</span>
                      <span class="num">(41条)</span>
                    </a>
                  </li>
                </ul>
              </div>
              <chart ref="chart1" :options="orgOptions" :auto-resize="true"></chart>
            </div>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import AMap from 'AMap'
export default {
  components: {},
  data() {
    return {
      orgOptions: {},
      colorList: [
        [
          '#ff7f50',
          '#87cefa',
          '#da70d6',
          '#32cd32',
          '#6495ed',
          '#ff69b4',
          '#ba55d3',
          '#cd5c5c',
          '#ffa500',
          '#40e0d0',
          '#1e90ff',
          '#ff6347',
          '#7b68ee',
          '#d0648a',
          '#ffd700',
          '#6b8e23',
          '#4ea397',
          '#3cb371',
          '#b8860b',
          '#7bd9a5'
        ],
        [
          '#ff7f50',
          '#87cefa',
          '#da70d6',
          '#32cd32',
          '#6495ed',
          '#ff69b4',
          '#ba55d3',
          '#cd5c5c',
          '#ffa500',
          '#40e0d0',
          '#1e90ff',
          '#ff6347',
          '#7b68ee',
          '#00fa9a',
          '#ffd700',
          '#6b8e23',
          '#ff00ff',
          '#3cb371',
          '#b8860b',
          '#30e0e0'
        ],
        [
          '#929fff',
          '#9de0ff',
          '#ffa897',
          '#af87fe',
          '#7dc3fe',
          '#bb60b2',
          '#433e7c',
          '#f47a75',
          '#009db2',
          '#024b51',
          '#0780cf',
          '#765005',
          '#e75840',
          '#26ccd8',
          '#3685fe',
          '#9977ef',
          '#f5616f',
          '#f7b13f',
          '#f9e264',
          '#50c48f'
        ]
      ][2],
      map: {},
      Weather: { temperature: '', reportTime: '' },
      queryInfo: {
        name: '',
        rank: '',
        position: '',
        // 当前的页数
        pagenum: 1,
        // 当前每页显示多少条数据
        pagesize: 100
      },
      nepalHotelDt: [],
      query: {
        id: 0
      },
      Hotel: {}
    }
  },
  methods: {
    detail(id) {
      this.query.id = id
      this.getHotelListById()
    },
    async getHotelList() {
      // this.$http.defaults.headers['IP'] = location.href.toString()
      // this.$http.defaults.headers['token'] = window.sessionStorage.getItem(
      //   'token'
      // )
      const { data: res } = await this.$http.get('/hotels', {
        params: this.queryInfo
      })
      if (res.status !== 201) {
        return this.$message.error('获取酒店列表失败！')
      }
      // console.log(res.Hotel)
      this.nepalHotelDt = res.hotel
    },
    AMapInit(arriveCoor = [120.868122, 30.033121]) {
      const _this = this
      this.map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: 15,
        center: arriveCoor
      })
      AMap.plugin('AMap.Weather', () => {
        // 创建天气查询实例
        var weather = new AMap.Weather()
        // 执行实时天气信息查询
        weather.getLive('绍兴市', (err, data) => {
          console.log(err, data)
          _this.Weather = data
        })
      })
    },
    onMarkerClick(e) {
      // console.log(this.information)
      const infoWindow = new AMap.AdvancedInfoWindow({
        // 创建信息窗体
        // isCustom: false, // 使用自定义窗体
        content: this.$refs.info, // 信息窗体的内容可以是任意html片段
        offset: new AMap.Pixel(16, -45)
      })
      infoWindow.open(this.map, [
        e.target.getPosition().lng,
        e.target.getPosition().lat
      ]) // 打开信息窗体
      // e.target就是被点击的Marker
      console.log(
        '经度：' + e.target.getPosition().lng,
        '纬度：' + e.target.getPosition().lat
      )
    },
    mapMarker(arriveCoor = [120.20113, 30.200703]) {
      this.marker = new AMap.Marker({
        icon: '', // 图片ip
        imageSize: '20px',
        position: arriveCoor,
        offset: new AMap.Pixel(-13, -30),
        // 设置是否可以拖拽
        draggable: false
        // cursor: 'move',
        // // 设置拖拽效果
        // raiseOnDrag: true
      })
      this.map.add(this.marker)
      this.marker.on('click', this.onMarkerClick)
    },
    getWeather() {
      AMap.plugin('AMap.Weather', function() {
        // 创建天气查询实例
        var weather = new AMap.Weather()
        // 执行实时天气信息查询
        weather.getLive('绍兴市', function(err, data) {
          console.log(err, data)
          this.Weather = data
        })
      })
    },
    async getHotelListById() {
      // this.$http.defaults.headers['IP'] = location.href.toString()
      // this.$http.defaults.headers['token'] = window.sessionStorage.getItem(
      //   'token'
      // )
      const { data: res } = await this.$http.get('/hotel', {
        params: this.query
      })
      if (res.status !== 201) {
        return this.$message.error('获取酒店失败！')
      }
      // console.log(res.Hotel)
      this.Hotel = res.hotel
      this.orgOptions.title.text = res.hotel.name + '热评'

      this.AMapInit([res.hotel.longitude, res.hotel.latitude])
      this.mapMarker([res.hotel.longitude, res.hotel.latitude])
      this.Hotel.src = this.Hotel.src.split(',')
    }
  },
  created() {
    this.query.id = this.$route.params.id || 0
  },
  mounted() {
    this.orgOptions = {
      // 图表标题
      title: {
        show: true, // 显示策略，默认值true,可选为：true（显示） | false（隐藏）
        text: '', // 主标题文本，'\n'指定换行
        x: 'center', // 水平安放位置，默认为左对齐，可选为：
        // 'center' ¦ 'left' ¦ 'right'
        // ¦ {number}（x坐标，单位px）
        y: 'bottom', // 垂直安放位置，默认为全图顶端，可选为：
        // 'top' ¦ 'bottom' ¦ 'center'
        // ¦ {number}（y坐标，单位px）
        // textAlign: null          // 水平对齐方式，默认根据x设置自动调整
        backgroundColor: 'rgba(0,0,0,0)',
        borderColor: '#ccc', // 标题边框颜色
        borderWidth: 0, // 标题边框线宽，单位px，默认为0（无边框）
        padding: 5, // 标题内边距，单位px，默认各方向内边距为5，
        right: 0,
        top: 0,
        // 接受数组分别设定上右下左边距，同css
        itemGap: 10, // 主副标题纵向间隔，单位px，默认为10，
        textStyle: {
          fontSize: 18,
          fontWeight: 'bolder',
          color: '#333' // 主标题文字颜色
        },
        subtextStyle: {
          color: '#aaa' // 副标题文字颜色
        }
      },
      backgroundColor: '#fff',
      tooltip: {},
      animationDurationUpdate: function(idx) {
        // 越往后的数据延迟越大
        return idx * 100
      },
      animationEasingUpdate: 'bounceIn',
      color: ['#fff', '#fff', '#fff'],
      series: [
        {
          type: 'graph',
          layout: 'force',
          force: {
            repulsion: 400,
            edgeLength: 100
          },
          roam: true,
          label: {
            normal: {
              show: true
            }
          },
          data: [
            {
              name: '新冠肺炎愈后一般6个月内不会再得',
              value: 2373,
              symbolSize: 48,
              draggable: true,
              itemStyle: {
                normal: {
                  shadowBlur: 100,
                  shadowColor: this.colorList[0],
                  color: this.colorList[0]
                }
              }
            },
            {
              name: '女篮两连胜后大喊武汉加油',
              value: 5449,
              symbolSize: 73,
              draggable: true,
              itemStyle: {
                normal: {
                  shadowBlur: 100,
                  shadowColor: this.colorList[1],
                  color: this.colorList[1]
                }
              }
            },
            {
              name: '火神山医院开微博',
              value: 2289,
              symbolSize: 67,
              draggable: true,
              itemStyle: {
                normal: {
                  shadowBlur: 100,
                  shadowColor: this.colorList[2],
                  color: this.colorList[2]
                }
              }
            },
            {
              name: '医疗队女队员集体理平头和光头',
              value: 2518,
              symbolSize: 50,
              draggable: true,
              itemStyle: {
                normal: {
                  shadowBlur: 100,
                  shadowColor: this.colorList[3],
                  color: this.colorList[3]
                }
              }
            },
            {
              name: '缅怀疫情中逝去的人们',
              value: 4730,
              symbolSize: 88,
              draggable: true,
              itemStyle: {
                normal: {
                  shadowBlur: 100,
                  shadowColor: this.colorList[4],
                  color: this.colorList[4]
                }
              }
            },
            {
              name: '妨害疫情防控的违法行为',
              value: 1952,
              symbolSize: 55,
              draggable: true,
              itemStyle: {
                normal: {
                  shadowBlur: 100,
                  shadowColor: this.colorList[5],
                  color: this.colorList[5]
                }
              }
            },
            {
              name: '66岁重症患者8天快速康复',
              value: 926,
              symbolSize: 70,
              draggable: true,
              itemStyle: {
                normal: {
                  shadowBlur: 100,
                  shadowColor: this.colorList[6],
                  color: this.colorList[6]
                }
              }
            },
            {
              name: '别让快递小哥一直等在寒风中',
              value: 4536,
              symbolSize: 67,
              draggable: true,
              itemStyle: {
                normal: {
                  shadowBlur: 100,
                  shadowColor: this.colorList[7],
                  color: this.colorList[7]
                }
              }
            },
            {
              name: '湖北以外地区新增病例数连降5天',
              value: 750,
              symbolSize: 47,
              draggable: true,
              itemStyle: {
                normal: {
                  shadowBlur: 100,
                  shadowColor: this.colorList[8],
                  color: this.colorList[8]
                }
              }
            },
            {
              name: '女儿写给战疫一线爸爸的信',
              value: 493,
              symbolSize: 82,
              draggable: true,
              itemStyle: {
                normal: {
                  shadowBlur: 100,
                  shadowColor: this.colorList[9],
                  color: this.colorList[9]
                }
              }
            },
            {
              name: '青海连续3天无新增病例',
              value: 385,
              symbolSize: 59,
              draggable: true,
              itemStyle: {
                normal: {
                  shadowBlur: 100,
                  shadowColor: this.colorList[10],
                  color: this.colorList[10]
                }
              }
            },
            {
              name: '辽宁再派1000名医护人员驰援武汉',
              value: 4960,
              symbolSize: 90,
              draggable: true,
              itemStyle: {
                normal: {
                  shadowBlur: 100,
                  shadowColor: this.colorList[11],
                  color: this.colorList[11]
                }
              }
            },
            {
              name: '抗击新型肺炎第一线',
              value: 8694000,
              symbolSize: 134,
              draggable: true,
              itemStyle: {
                normal: {
                  shadowBlur: 100,
                  shadowColor: this.colorList[12],
                  color: this.colorList[12]
                }
              }
            },
            {
              name: '12项疫情防控惠民政策',
              value: 5668,
              symbolSize: 75,
              draggable: true,
              itemStyle: {
                normal: {
                  shadowBlur: 100,
                  shadowColor: this.colorList[13],
                  color: this.colorList[13]
                }
              }
            },
            {
              name: '战疫一线的别样团圆',
              value: 339,
              symbolSize: 68,
              draggable: true,
              itemStyle: {
                normal: {
                  shadowBlur: 100,
                  shadowColor: this.colorList[14],
                  color: this.colorList[14]
                }
              }
            },
            {
              name: '31省区市心理援助热线',
              value: 671,
              symbolSize: 62,
              draggable: true,
              itemStyle: {
                normal: {
                  shadowBlur: 100,
                  shadowColor: this.colorList[15],
                  color: this.colorList[15]
                }
              }
            },
            {
              name: '元宵节亮灯为武汉加油',
              value: 27000,
              symbolSize: 114,
              draggable: true,
              itemStyle: {
                normal: {
                  shadowBlur: 100,
                  shadowColor: this.colorList[16],
                  color: this.colorList[16]
                }
              }
            },
            {
              name: '抗击新型肺炎我们在行动',
              value: 10777000,
              symbolSize: 130,
              draggable: true,
              itemStyle: {
                normal: {
                  shadowBlur: 100,
                  shadowColor: this.colorList[17],
                  color: this.colorList[17]
                }
              }
            },
            {
              name: '疫情中的逆行者',
              value: 92000,
              symbolSize: 123,
              draggable: true,
              itemStyle: {
                normal: {
                  shadowBlur: 100,
                  shadowColor: this.colorList[18],
                  color: this.colorList[18]
                }
              }
            },
            {
              name: '一张图看懂新冠肺炎',
              value: 20000,
              symbolSize: 141,
              draggable: true,
              itemStyle: {
                normal: {
                  shadowBlur: 100,
                  shadowColor: this.colorList[19],
                  color: this.colorList[19]
                }
              },
              url: 'https://gallery.echartsjs.com/preview.html?c=xPLngHx_Z&v=1'
            }
          ]
        }
      ]
    }
    this.Weather = { temperature: 23, reportTime: new Date() }
    this.getHotelList()
    this.getHotelListById()
  }
}
</script>
<style lang="scss" scoped>
.mfw-toolbar {
  position: fixed;
  right: 43%;
  bottom: 20px;
  height: auto;
  margin-right: -558px;
  display: none;
  z-index: 10;
  .toolbar-item-code .mfw-code {
    border: 1px solid #e5e5e5;
    display: none;
    position: absolute;
    right: 55px;
    bottom: 0;
    background-color: #fff;
    padding: 6px;
    color: #999;
    img {
      border: 0;
      vertical-align: middle;
    }
  }
  .toolbar-item-code .btn:hover {
    background-color: #ff9d00;
    border-color: #ff9d00;
  }
  .icon_feedback {
    width: 18px;
    height: 18px;
    background-position: -90px -165px;
    margin-top: 13px;
  }
  .icon_code {
    width: 19px;
    height: 19px;
    background-position: -120px -165px;
    margin-top: 13px;
  }
  a:hover {
    outline: 0;
    text-decoration: underline;
    color: #ff8a00;
    cursor: pointer;
  }
  .icon_top {
    width: 21px;
    height: 12px;
    background-position: -60px -165px;
    margin-top: 16px;
  }
  i {
    background: url(../Index/header-sprites15.png) no-repeat 0 0;
    display: inline-block;
  }
}
.toolbar-item-top,
.toolbar-item-feedback,
.toolbar-item-code,
.toolbar-item-down {
  margin-bottom: -1px;
}
.mfw-toolbar .btn {
  width: 43px;
  height: 43px;
  display: block;
  border: 1px solid #e5e5e5;
  text-align: center;
  background-color: #fff;
  position: relative;
  em {
    width: 35px;
    background-color: #aaa;
    font-size: 12px;
    line-height: 16px;
    color: #fff;
    font-style: normal;
    position: absolute;
    left: -1px;
    top: -1px;
    z-index: 2;
    display: none;
    padding: 5px 4px 0 4px;
    height: 38px;
    border: 1px solid #aaa;
  }
}
.index-wrap {
  width: 100%;
}
.echarts {
  width: 870px;
  height: 850px;
}
.mhd {
  font-size: 20px;
  line-height: 80px;
  color: #333;
  margin: -30px -3000px 0px;
  padding: 40px 3000px 0;
  border-top: 1px solid #eee;
  font-weight: normal;
}
.review-nav {
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
  .on a {
    background-color: #fca729;
    color: #fff;
    margin-right: 20px;
  }
  .num {
    font-size: 12px;
    color: #999;
  }
  a {
    color: #333;
    display: inline-block;
    padding: 0 15px;
    border-radius: 2px;
    cursor: pointer;
  }
  li {
    float: left;
    margin: 5px 0;
    line-height: 24px;
    font-size: 14px;
    border-left: 1px solid #eee;
  }
}
#container {
  margin-top: 20px;
  box-sizing: border-box;
  width: 100%;
  height: 300px;
}

.index-left-block {
  margin-bottom: 30px;
  background: #fff;
  box-shadow: 0 0 1px #ddd;
  padding-bottom: 5px;
  .asidebox-hd {
    padding: 12px 12px 10px 12px;
    height: 35px;
    line-height: 35px;
    .title {
      // float: left;
      font-size: 18px;
      color: #333;
      font-weight: normal;
      cursor: pointer;
    }
    .hd-right {
      float: right;
      color: #999;
      cursor: pointer;
    }
  }
}

.index-wrap .index-left-block h2 {
  background: #4fc08d;
  color: #fff;
  padding: 10px 15px;
  margin-bottom: 20px;
  font-size: 14px;
}

.container-list.pic_news {
  padding: 0 3px;
}

.container-list.pic_news h3 {
  text-align: right;
}

.pic_news img {
  float: left;
  margin: 0 5px;
}

.pic_news img {
  width: 113px;
  height: 77px;
}

.pic_news p {
  font-size: 14px;
  padding: 8px 0;
  color: #928c8d;
}

.pic_news ul > li span {
  float: right;
  color: #999;
}

.pic_news a,
.product_list a {
  color: #666;
  text-decoration: none;
}

.pic_news li {
  padding-left: 10px;
  margin: 8px;
  border-bottom: 1px dotted #ccc;
  height: 17px;
  line-height: 17px;
}

.container-list.product_list img {
  width: 280px;
  padding: 0 22px;
}

.container-list.product_list h3 {
  text-align: center;
  padding-top: 10px;
}

.container-list.product_list p {
  padding: 15px;
  text-indent: 35px;
}

.address-tag-container {
  padding: 13px 15px;
}

.address-tag-container span {
  cursor: default;
}

.container-list.food {
  width: 302px;
  margin: 0 auto;
}

.container-list.food .mask,
.el-carousel__item .mask {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
}

.container-list.food .mask {
  width: 300px;
  padding: 0 20px;
}

.el-carousel__item .mask {
  text-align: center;
  width: 100%;
  padding: 23px 20px;
  color: #fff;
}

.fiery-activity {
  margin-top: 15px;
  background: url('../../assets/images/nianwei.jpeg') 0 0 no-repeat;
  width: 100%;
  background-size: 100%;
}

.fiery-activity .xinchun-link {
  width: 225px;
  height: 225px;
  display: block;
}

.xinchun-memu {
  padding: 0 8px;
}

.xinchun_item {
  background: url('../../assets/images/xinchun.png') 0 0 no-repeat;
  background-size: 100%;
  width: 230px;
  height: 30px;
  margin-bottom: 5px;
  line-height: 30px;
}

.xinchun-memu .xinchun_item a {
  font-family: 'microsoft yahei';
  font-size: 14px;
  font-weight: bold;
  color: #ff6284;
  display: block;
  padding-left: 10px;
}

.fiery-activity-main {
  padding: 20px 0;
}

.fiery-activity-main img {
  width: 245px;
  height: 120px;
}

.el-main.fiery-activity-main .el-col.el-col-11 {
  margin-left: 10px;
  padding: 0 10px 15px 10px;
}

.el-main.fiery-activity-main .grid-content {
  background-color: #fff;
}

.el-main.fiery-activity-main .el-col.el-col-11 a {
  display: block;
  text-align: center;
  padding-top: 8px;
}

.el-main.fiery-activity-main .activity_mess {
  position: absolute;
  padding-bottom: 5px;
  color: #fff;
  width: 245px;
  height: 38px;
  margin-left: 18px;
  bottom: 50px;
  font-size: 12px;
  background-color: rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.el-main.fiery-activity-main .activity_mess a:link,
.el-main.fiery-activity-main .activity_mess a:visited,
.el-main.fiery-activity-main .activity_mess a:hover,
.el-main.fiery-activity-main .activity_mess a:active {
  color: #fff;
}

.el-main.fiery-activity-main .activity_mess a span {
  font-weight: bold;
}

.el-main.fiery-activity-main .activity_price {
  padding: 5px 17px 5px 17px;
}

.activity_price .el-col.el-col-12:nth-child(1) {
  color: #f60;
  font-size: 14px;
  padding-left: 5px;
  margin-top: -5px;
}

.activity_price .el-col.el-col-12:nth-child(1) span {
  font-weight: bold;
  font-size: 20px;
}

.activity_price .el-col.el-col-12:nth-child(2) {
  text-align: right;
  color: #999;
  font-size: 12px;
}
.detail {
  dl {
    margin-left: 30px;
    dt {
      font-size: 18px;
    }
    dd {
      margin: 10px 0 10px 30px;
      font-size: 15px;
    }
  }

  .clearfix:after {
    content: '';
    clear: both;
    height: 0;
    overflow: hidden;
    display: block;
  }
  // position: relative;
  .baseinfo {
    margin: 10px 0 25px;
    font-size: 14px;
    line-height: 24px;
    li {
      float: left;
      width: 250px;
      padding: 0px 0 0 35px;
    }
    .label {
      font-size: 18px;
    }
    .content {
      font-size: 15px;
    }
  }
  p {
    padding-bottom: 25px;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 25px;
    font-size: 16px;
    color: #333;
    line-height: 24px;
    text-indent: 30px;
  }
  .extra {
    float: right;
    // padding-top: 10px;
    text-align: right;
    span {
      font-size: 14px;
      float: none;
      padding: 0;
      width: auto;
      text-align: right;
      font-size: 12px;
      color: #999;
      line-height: 25px;
    }
  }
  .title {
    margin-right: 10px;
    font-weight: normal;
    font-size: 30px;
    color: #333;
    .weather {
      float: none;
      padding: 0;
      width: auto;
      text-align: right;
      font-size: 12px;
      color: #999;
    }
  }
  .r-nav {
    margin: 0;
    line-height: 59px;
    font-size: 16px;
    color: #333;
    height: 60px;
    ul {
      margin-top: 15px;
      position: relative;
      z-index: 2;
      border-top: 1px solid #ededed;
    }
    li {
      // float: left;
      display: inline;
      a {
        display: inline-block;
        padding: 0 20px;
        color: #333;
      }
      a:hover {
        text-decoration: none;
        // color: #ff9d00;
        cursor: pointer;
      }
      span {
        font-size: 12px;
        color: #999;
      }
    }
    li.on a {
      color: #ff9d00;
      border-bottom: 2px solid #ff9d00;
      cursor: pointer;
    }
    .nav-right {
      float: right;
      cursor: pointer;
    }
    .btn-reviews {
      display: inline-block;
      line-height: 35px;
      background-color: #ff9d00;
      padding: 0 30px;
      border-radius: 3px;
      color: #fff;
      font-size: 14px;
      *vertical-align: middle;
    }
  }
}
</style>
